<template>
	<!-- 学习计划添加 -->
	<div>
		<!-- 标题区域 -->
		<h3>学习计划表</h3>
		<!-- 提交区域 -->
		<el-card>
			<el-form @submit.prevent="add">
				<el-row>
					<!-- 学习科目 -->
					<el-form-item label="学习科目">
						<el-input v-model.trim="subject" placeholder="请输入学习科目" />
					</el-form-item>
					<!-- 学习任务 -->
					<el-form-item label="学习任务" style="padding: 0 10px;">
						<el-input v-model.trim="content" style="width: 240px" :rows="1" type="textarea" placeholder="请输入学习内容" />
					</el-form-item>
					<!-- 学习地点 -->
					<el-form-item label="学习地点">
						<el-select v-model="selectedOption" style="width: 240px">
							<el-option v-for="(item,i) in options" :key="i" :value="item.place" :label="item.place">
							</el-option>
						</el-select>
					</el-form-item>

					<!-- 添加按钮 -->
					<el-form-item style="padding: 0 10px;">
						<el-button type="primary" @click="add" :icon="Plus">添加</el-button>
					</el-form-item>
				</el-row>
			</el-form>
		</el-card>
	</div>

</template>


<script setup>
	import { Delete, Plus } from '@element-plus/icons-vue'
	import { ref, defineEmits } from 'vue'

	// 定义事件
	const emits = defineEmits(['addItem']);

	let subject = ref('')
	let content = ref('')
	let selectedOption = ref('自习室')
	let options = ref([
		{ placeCode: 0, place: '自习室', },
		{ placeCode: 1, place: '图书馆', },
		{ placeCode: 2, place: '宿舍', },
	])

	let add = () => {
		// 学习科目不能为空
		if (subject.value === '') {
			alert('学习科目为必填项！')
			return
		}

		// 触发父组件自定义事件addItem并传参
		emits('addItem', subject.value, content.value, selectedOption.value)
		// 变量重置初始值
		subject.value = ''
		content.value = ''
		selectedOption.value = '自习室'
	}
</script>

<style>
</style>